<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="/common/template :: header(~{::title},~{::link},~{::style})">
</head>
<body>
<div class="layui-form timo-compile">
    <form th:action="@{/goods/save}">
        <input type="hidden" name="id" th:if="${goods}" th:value="${goods.id}">
        <div class="layui-form-item">
            <label class="layui-form-label">商品名称</label>
            <div class="layui-input-inline">
                <input class="layui-input" type="text" name="title" placeholder="请输入商品名称" th:value="${goods?.title}">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">购买方式</label>
            <div class="layui-input-inline">
                <input class="layui-input" type="text" name="buyType" placeholder="请输入购买方式"
                       th:value="${goods?.buyType}">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">价格</label>
            <div class="layui-input-inline">
                <input class="layui-input" type="text" name="price" placeholder="请输入价格" th:value="${goods?.price}">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">轮播图</label>
            <div class="layui-input-inline">
                <button type="button" class="layui-btn upload-image" name="image1" up-field="path"
                        up-url="/upload/image"><i class="layui-icon"></i>上传图片
                </button>
            </div>
            <input id="imageHidden" th:value="${goods?.image1}" hidden="hidden">
            <div class="upload-show" id="image1"></div>

        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">缩略图</label>
            <div class="layui-input-inline">
                <input class="layui-input" type="text" name="image2" placeholder="请输入缩略图" th:value="${goods?.image2}">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">推荐首页</label>
            <div class="layui-input-inline">
                <input class="layui-input" type="text" name="recommend_status" placeholder="请输入推荐首页"
                       th:value="${goods?.recommend_status}">
            </div>
        </div>
        <input name="detail" hidden="hidden" id="detailInput" th:value="${goods?.detail}">
        <div id="detail">
        </div>

        <div class="layui-form-item timo-finally">
            <button class="layui-btn ajax-submit"><i class="fa fa-check-circle"></i> 保存</button>
            <button class="layui-btn btn-secondary close-popup"><i class="fa fa-times-circle"></i> 关闭</button>
        </div>
    </form>
</div>
<script th:replace="/common/template :: script"></script>

<script type="text/javascript">
    var E = window.wangEditor
    var editor = new E("#detail");
    var inp = $('#detailInput');
    var image1 = $("#image1");
    var imageHidden = $("#imageHidden");
    var imageUrl = imageHidden.val();
    if (imageUrl.length > 0) {
        image1.append('<div class="upload-item succeed"><img src="' + imageUrl +
            '"><i class="upload-item-close layui-icon layui-icon-close"></i></div>');
    }
    editor.config.onchange = function (html) {
        //富文本框数据变化时触发
        inp.val(html);
    }
    //设置富文本框toolbar
    editor.config.menus = [
        'head',  // 标题
        'bold',  // 粗体
        'fontSize',  // 字号
        'fontName',  // 字体
        'italic',  // 斜体
        'underline',  // 下划线
        'strikeThrough',  // 删除线
        'foreColor',  // 文字颜色
        'backColor',  // 背景颜色
        'link',  // 插入链接
        'list',  // 列表
        'justify',  // 对齐方式
        'quote',  // 引用
        'emoticon',  // 表情
        'image',  // 插入图片
        'table',  // 表格
        'code',  // 插入代码
        'undo',  // 撤销
        'redo'  // 重复
    ];
    editor.config.placeholder = '请输入商品详情...'
    editor.config.showFullScreen = true;
    editor.config.height = 500
    // 上传图片到服务器
    editor.config.uploadFileName = 'file'; //设置文件上传的参数名称
    editor.config.uploadImgServer = '/upload/wang/image'; //设置上传文件的服务器路径
    editor.config.uploadImgMaxSize = 3 * 1024 * 1024; // 将图片大小限制为 3M
    //自定义上传图片事件
    editor.config.uploadImgHooks = {
        before: function (xhr, editor, files) {

        },
        success: function (xhr, editor, result) {
            console.log("上传成功");
        },
        fail: function (xhr, editor, result) {
            console.log("上传失败,原因是" + result);
        },
        error: function (xhr, editor) {
            console.log("上传出错");
        },
        timeout: function (xhr, editor) {
            console.log("上传超时");
        }
    }
    //创建编辑器
    editor.create();
    editor.txt.html(inp.val())

</script>

</body>
</html>